[Swift] YouTube-Player-iOS-Helper を使って YouTube 動画を再生してみる

田宮宙比己

2015.12.10

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

先日、クラスメソッド関連会社の underscore よりマイクラTubeという、YouTube上にあるマインクラフト動画を再生するアプリをリリースしました。

このアプリでは、OSSを使って簡単に動画再生を実現しています。

今回は、このOSSの使い方をご説明したいと思います。

OSSの紹介

YouTube-Player-iOS-Helper という OSS を使います。

YouTube-Player-iOS-Helper

実装環境

使用言語: Swift
Xcodeバージョン: 7.1.1
iOS 8.4

プロジェクトに導入する

use_frameworks!

target '（ターゲット名）' do
    pod 'youtube-ios-player-helper', '0.1.4'
end

Podfile 内の適切な場所に、上記を参考に追記し、pod install で導入します。今回は Swift で実装していくので、use_frameworks!を指定しています。

実装

Storyboard関係

スクリーンショット 2015-12-10 13.10.38

YTPlayerView

Storyboard 上で、動画再生用にUIViewを置き、Custom Classとして、YTPlayerViewを指定します。

これをコード側(ViewControllerを継承するクラス) にドラッグ＆ドロップし、IBOutletとしてひも付けます。

UIButton

UIButtonを置きます。再生・一時停止・停止ボタンとなります。

IBActionとしてコードにひも付けます。

UILabel

UILabelを追加します。動画の再生ステータスを表示するためのものです。

IBOutletとしてコードにひも付けます。

コード

YouTube-Player-iOS-Helper をインポート

import youtube_ios_player_helper

Cocoapods で導入した YouTube-Player-iOS-Helper をインポートします。

クラス定義冒頭

class ViewController: UIViewController, YTPlayerViewDelegate {
    @IBOutlet weak var playerView: YTPlayerView!
    @IBOutlet weak var stateLabel: UILabel!

YTPlayerViewDelegate への準拠宣言、IBOutletについて書かれています。

viewDidLoad

override func viewDidLoad() {
    super.viewDidLoad()
    playerView.delegate = self;
    self.playerView.loadWithVideoId("i7P4hjusxB0", playerVars: ["playsinline":1])
}

playerViewからの通知を受け取れるよう宣言しています。
YouTube動画のIDを指定し、動画を再生する宣言をしています。
- playerVarsでは、動画再生時のオプションを指定できます。
- 各種パラメータを、[NSObject : AnyObject] で指定できます。
- ここでは、動画再生時に、全画面ではなく、インライン表示するよう指定しています。
- パラメータは多数あります。詳しくは、YouTube 埋め込みプレーヤーとプレーヤーのパラメータ | YouTube IFrame API | Google Developersをご参照下さい。

IBAction

@IBAction func tapPlay(sender: AnyObject) {
    // 再生
    self.playerView.playVideo()
}
@IBAction func tapPause(sender: AnyObject) {
    // 一時停止
    self.playerView.pauseVideo()
}
@IBAction func tapStop(sender: AnyObject) {
    // 停止
    self.playerView.stopVideo()
}

動画を再生したり停止するのは簡単です。

上記のように、YTPlayerViewが持つメソッドを呼ぶだけです。

デリゲートメソッド

func playerView(playerView: YTPlayerView!, didChangeToState state: YTPlayerState) {
    switch (state) {
    case YTPlayerState.Unstarted:
        stateLabel.text = "停止中"
    case YTPlayerState.Playing:
        stateLabel.text = "再生中"
    case YTPlayerState.Paused:
        stateLabel.text = "一時停止中"
    case YTPlayerState.Buffering:
        stateLabel.text = "バッファリング中"
    case YTPlayerState.Ended:
        stateLabel.text = "再生終了"
    default:
        break
    }
}

上記デリゲートメソッドにより、動画再生ステータスが変化した時に、その状況をキャッチできます。

再生状況により、表示が変化するように定義しています。

コード全体

import UIKit
import youtube_ios_player_helper

class ViewController: UIViewController, YTPlayerViewDelegate {
    @IBOutlet weak var playerView: YTPlayerView!
    @IBOutlet weak var stateLabel: UILabel!

    // MARK: - Life Cycle
    override func viewDidLoad() {
        super.viewDidLoad()
        playerView.delegate = self;
        self.playerView.loadWithVideoId("i7P4hjusxB0", playerVars: ["playsinline":1])
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }

    // MARK: - IBAction
    @IBAction func tapPlay(sender: AnyObject) {
        self.playerView.playVideo()
    }
    @IBAction func tapPause(sender: AnyObject) {
        self.playerView.pauseVideo()
    }
    @IBAction func tapStop(sender: AnyObject) {
        self.playerView.stopVideo()
    }

    // MARK: - delegate methods
    func playerView(playerView: YTPlayerView!, didChangeToState state: YTPlayerState) {
        switch (state) {
        case YTPlayerState.Unstarted:
            stateLabel.text = "停止中"
        case YTPlayerState.Playing:
            stateLabel.text = "再生中"
        case YTPlayerState.Paused:
            stateLabel.text = "一時停止中"
        case YTPlayerState.Buffering:
            stateLabel.text = "バッファリング中"
        case YTPlayerState.Ended:
            stateLabel.text = "再生終了"
        default:
            break
        }
    }
}